<div class="d-flex flex-row align-items-center mb-4">
    <div class="mr-auto d-flex align-items-center">
        <img [attr.src]="'/assets/icons-svg/icon-analyst-view.svg'" class="analyst-icon mr-3 flex-column" />
        <h3 class="mb-0 flex-column">Risk Analysis</h3>
    </div>
    <a class="btn btn-sm btn-transparent primary-dark ml-auto text-none" href="javascript:;;" (click)="riskModal.show()">View Risk Details</a>
</div>

<div class="d-flex flex-row align-items-stretch shadow">
    <div class="card w-50 left-card">
        <div *ngIf="exposure!=undefined && management!=undefined" class="card-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="d-flex align-items-center">
                        <h5 class="mr-auto">Exposure Score</h5>
                    </div>
                    <span class="pillar-current-rating">{{ exposure | number:'1.1-1' }}</span>
                    <span class="pillar-max-rating">/{{ maxExposure }}</span>
                    <span class="pillar-assessment-text offset-1">{{ exposureAssesment }}</span>
                    <div *ngIf="exposureClusters && (!meiIsBaselineIssue || isCore)" class="beta">Beta&nbsp;=&nbsp;{{ isMei || isCore ? finalBetaFactor : overallBetaFactor }}&nbsp;<i class="ti-help-alt" 
                        title="Beta: A factor that assesses the degree to which a company’s exposure deviates from its subindustry’s exposure on a material ESG issue. It is used to derive a company-specific issue exposure score for a material ESG issue. It ranges from 0 to 10, with 0 indicating no exposure, 1 indicating the subindustry average, and 10 indicating exposure that is ten times the subindustry average."></i>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div *ngIf="exposureClusters && !isMei && !isCore" intervalChart [chartID]="'intervalExposurechart'" [clusters]="exposureClusters"
                        [companyCode]="exposureCode" [axisReversed]="true" [arrowPositionY]="19" [showClusterNameInAxis]="true" [currentValue]="exposure" [showText]="false" [axisOnTop]="true"
                        [subindustryExposureScore]="subindustryExposureScore" [colors]="intervalExposurechartColors" style="position: relative">
                        <div id='intervalExposurechartAxis' style="height: 24px; margin-top:-5"></div>
                        <div id="intervalExposurechart" class="intervalChart"></div>
                        <div class="text-center subIndustry">SubIndustry</div>
                    </div>
                    <div *ngIf="exposureClusters && ((isMei && !meiIsBaselineIssue) || isCore)" intervalChart [chartID]="'intervalExposurechart'" [clusters]="exposureClusters"
                        [companyCode]="exposureCode" [axisReversed]="true" [arrowPositionY]="19" [showClusterNameInAxis]="true" [currentValue]="exposure" [showText]="false" [axisOnTop]="true" [addPlus]="true"
                        [subindustryExposureScore]="subindustryExposureScore" [colors]="intervalExposurechartColors" style="position: relative">
                        <div id='intervalExposurechartAxis' style="height: 24px;"></div>
                        <div id="intervalExposurechart" class="intervalChart"></div>
                        <div class="text-center subIndustry">SubIndustry</div>
                    </div>
                    <div *ngIf="exposureClusters && isMei && meiIsBaselineIssue" intervalChart [chartID]="'intervalExposurechart'" [clusters]="exposureClusters"
                        [companyCode]="exposureCode" [axisReversed]="true" [arrowPositionY]="19" [showClusterNameInAxis]="true" [currentValue]="exposure" [showText]="false" [axisOnTop]="true" [addPlus]="true"
                        [colors]="intervalExposurechartColors" style="position: relative">
                        <div id='intervalExposurechartAxis' style="height: 24px;"></div>
                        <div id="intervalExposurechart" class="intervalChart"></div>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <div *ngIf="!isMei">
                    <p *ngIf="exposureComment && exposureComment.length>0 && exposureComment.length <= 220" [innerHtml]="exposureComment"></p>
                    <div *ngIf="exposureComment && exposureComment.length > 220">
                        <p [innerHtml]="(exposureComment | slice:0:220) + '&hellip;'"></p>
                        <a href="javascript:;;" class="text-link secondary-text" (click)="exposureModal.show()">READ MORE</a>
                    </div>
                </div>
                <div *ngIf="isMei">
                    <div *ngIf="meiIsMain && exposureComment && exposureComment.length <= 220">
                        <p [innerHtml]="exposureComment"></p>
                    </div>
                    <div *ngIf="meiIsMain && exposureComment!==undefined && exposureComment.length > 220">
                            <p  [innerHtml]="(exposureComment | slice:0:220) + '&hellip;'"></p>
                            <a href="javascript:;;" class="text-link secondary-text" (click)="exposureModal.show()">READ MORE
                            </a>
                    </div>
                    <div *ngIf="!meiIsMain && exposureComment!==undefined && narrative!==undefined && exposureComment.length + narrative.length <= 220">
                        <p *ngIf="narrative.length > 0" [innerHtml]="narrative"></p>
                        <p *ngIf="exposureComment.length > 0" [innerHtml]="exposureComment"></p>
                    </div>
                    <div *ngIf="!meiIsMain && exposureComment!==undefined && narrative!==undefined && exposureComment.length + narrative.length > 220">
                        <p *ngIf="narrative.length > 0" [innerHtml]="(narrative + '<br>' + exposureComment | slice:0:220) + '&hellip;'"></p>
                        <p *ngIf="narrative.length === 0" [innerHtml]="(exposureComment | slice:0:220) + '&hellip;'"></p>
                        <a href="javascript:;;" class="text-link secondary-text" (click)="exposureModal.show()">READ MORE
                        </a>
                    </div>

                </div>

            </div>

            <hr />

            <div class="row">
                <div class="col-sm-6">
                    <div class="d-flex align-items-center">
                        <h5>Management Score</h5>
                    </div>
                    <span class="pillar-current-rating">{{ management | number:'1.1-1' }}</span>
                    <span class="pillar-max-rating">/{{ maxManagement }}</span>
                    <span class="pillar-assessment-text offset-1">{{ managementAssesment }}</span>
                </div>
                <div class="col-sm-6">
                    <div *ngIf="managementClusters" intervalChart [chartID]="'intervalManagementchart'" [clustersReversed]="true" [axisReversed]="true" [arrowPositionY]="19"
                        [clusters]="managementClusters" [companyCode]="managementCode" [showClusterNameInAxis]="true" [showText]="false"
                        [currentValue]="management" [colors]="intervalManagementchartColors" [axisOnTop]="true" style="position: relative">
                        <div id='intervalManagementchartAxis' style="height: 24px;"></div>
                        <div id="intervalManagementchart" class="intervalChart"></div>
                    </div>

                </div>
            </div>

            <div *ngIf="!isMei && esgRiskManagement" class="mt-3">
                <p *ngIf="esgRiskManagement.length <= 220" [innerHtml]="esgRiskManagement"></p>
                <div *ngIf="esgRiskManagement.length > 220">
                    <p [innerHtml]="(esgRiskManagement | slice:0:220) + '&hellip;'"></p>
                    <a href="javascript:;;" class="text-link secondary-text" (click)="managementModal.show()">READ MORE</a>
                </div>
            </div>
            <div *ngIf="isMei && managementComment" class="mt-3">
                    <p *ngIf="managementComment.length <= 220" [innerHtml]="managementComment"></p>
                    <div *ngIf="managementComment.length > 220">
                        <p [innerHtml]="(managementComment | slice:0:220) + '&hellip;'"></p>
                        <a href="javascript:;;" class="text-link secondary-text" (click)="managementCommentModal.show()">READ MORE</a>
                    </div>
            </div>


        </div>
    </div>
    <div class="card w-50 right-card card-body">
        <subindustry-risk-rating *ngIf="displayType === 'overview'" #subIndustry [displayType]="'scatter'" [isCore]="isCore"></subindustry-risk-rating>
        <mei-subindustry-risk-rating *ngIf="displayType === 'mei'" #subIndustry [displayType]="'scatter'"></mei-subindustry-risk-rating>
    </div>
</div>

<app-modal #exposureModal [id]="'exposureModal'" [size]="'modal-lg'">
    <div class="app-modal-body">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">Exposure Score</h5>
        </div>
        <span class="pillar-current-rating">{{ exposure | number:'1.1-1' }}</span>
        <span class="pillar-max-rating">/{{ maxExposure }}</span>
        <p *ngIf="isMei && !meiIsMain && narrative" class="mt-4" [innerHtml]="narrative"></p>
        <p *ngIf="exposureComment" class="mt-4" [innerHtml]="exposureComment"></p>
    </div>
</app-modal>

<app-modal #managementModal [id]="'managementModal'" [size]="'modal-lg'">
    <div class="app-modal-body" *ngIf="esgRiskManagement">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">Management Score</h5>
        </div>
        <span class="pillar-current-rating">{{ management | number:'1.1-1' }}</span>
        <span class="pillar-max-rating">/{{ maxManagement }}</span>
        <p class="mt-4" [innerHtml]="esgRiskManagement"></p>
    </div>
</app-modal>

<app-modal #managementCommentModal [id]="'managementCommentModal'" [size]="'modal-lg'">
    <div class="app-modal-body" *ngIf="managementComment">
            <div class="d-flex align-items-center">
                <h5 class="mr-auto">Management Score</h5>
            </div>
            <span class="pillar-current-rating">{{ management | number:'1.1-1' }}</span>
            <span class="pillar-max-rating">/{{ maxManagement }}</span>
        <p class="mt-4" *ngIf="!meiIsMain && analystViewManagementAssessment" [innerHtml]="analystViewManagementAssessment"></p>
        <p class="mt-4" *ngIf="meiIsMain" [innerHtml]="managementComment"></p>
    </div>
</app-modal>

<app-modal #riskModal [id]="'riskModal'" [size]="'modal-xl'" [showCloseButton]=true>
    <div class="app-modal-body px-4">
        <div *ngIf="manageableRisk">
            <risk-details [details]="{exposure: exposure, manageableRisk: manageableRisk, managedRisk: managedRisk}" [isMei]="isMei"></risk-details>
        </div>
    </div>
</app-modal>